<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage" >
      <l-panel :title="title"  class="l-panel-overflow">
        <div class="report-chart" v-if="data.tempStyle == '2' || data.tempStyle == '3'" >
           <l-echarts ref="main"></l-echarts>
        </div>
        <l-table 
          v-if="data.tempStyle == '1' || data.tempStyle == '3'"
          height="notset"
          ref="mainTable" 
          :columns="columns" 
          :dataSource="tableData"
          >
        </l-table>
      </l-panel>
    </l-layout>
</template>
<script>
  import { mapGetters } from "vuex"
  const api = window.$api.report.scheme
  export default {
    data() {
      return {
        lr_isPage: false,
        tableData:[],
        columns: [],
        ispreview:false,
        id:'',
        data:{},
        ready:false,

        timer:null,
        barOption:{
          tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          xAxis: {
              type: 'category',
              data: []
          },
          yAxis: {
              type: 'value'
          },
          series: [{
            data: [],
            type: 'bar'
          }]
        },
        lineOption:{
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [],
            type: 'line'
          }]
        },
        pieOption: {
          tooltip: {
              trigger: 'item'
          },
          legend: {
              orient: 'vertical',
              left: 'left',
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: '50%',
              data: [
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
      }
    },
    computed:{
      ...mapGetters(["screen"]),
      title(){
        if(this.ispreview){
          return `${this.$t('当前报表连接')}:/myreport/${this.id}`
        }
        return ''
      }
    },
    watch:{
      lr_isCollapse(){
        setTimeout(() => {      
          this.$refs.main && this.$refs.main.updateChart()
        }, 100)
      },
      screen(){
        setTimeout(() => {      
          this.$refs.main && this.$refs.main.updateChart()
        }, 100)
      },
      $route:{
        handler(route){
          if(route.name == 'myreport' && route.params.routerPath){
            this.init(route.params.routerPath)
          }
        },
        immediate: true
      }            
    },
    methods: {
      async init(id,ispreview){
        this.ready = false
        this.id = id
        if(ispreview){
          this.ispreview = true
        }
        else{
          this.ispreview = false
        }
        const data =await this.$awaitWraper(api.getData(id))
        if(data.id == this.id){
          this.data = data || {}
          if(data.tempStyle == '1' || data.tempStyle == '3'){
            this.refreshTable(data.listData)
          }
          this.ready = true
          if(data.tempStyle == '2' || data.tempStyle == '3'){
            this.refreshChart(data.chartType,data.chartData)
          }
        }
      },

      refreshTable(data){
        data = data || []
        this.tableData = data
        const columns = []
        if(data.length >0){
          for(let key in data[0]){
            columns.push({prop:key,label:key,minWidth:120})
          }
        }
        
        this.columns = columns
      },

      refreshChart(type,data){
        if(this.timer == null){
          this.timer = setTimeout(async ()=>{
            let option
            switch (type) {
              case 'bar':
                option = await this.getBarOption(data)
                break
              case 'line':
                option = await this.getLineOption(data)
                break
              case 'pie':
                option = await this.getOption(data)
                break
            }
            this.$refs.main.updateChart(option)
            this.timer = null
          },100)
        }
      },

      getBarOption(data){
        data = data || []
        this.barOption.xAxis = {
          type: 'category',
          data: []
        }
        this.barOption.yAxis = {
          type: 'value'
        }
    
        const xList = []
        const yList = []
        
        data.forEach(item=>{
            xList.push(item.name)
            yList.push(item.value)
        })
        this.barOption.series[0].data = yList
        this.barOption.xAxis.data = xList


        return this.barOption
      },
      getLineOption(data){
        data = data || []
        this.lineOption.xAxis = {
          type: 'category',
          data: []
        }
        this.lineOption.yAxis = {
          type: 'value'
        }
    
        const xList = []
        const yList = []
        
        data.forEach(item=>{
            xList.push(item.name)
            yList.push(item.value)
        })
        this.lineOption.series[0].data = yList
        this.lineOption.xAxis.data = xList


        return this.lineOption
      },
      getOption(data){
        //this.pieOption.series[0].name = this.data[0].name
        this.pieOption.series[0].data = data || []
        return this.pieOption
      }
    }
  }
</script>
<style lang="scss">
.report-chart{
  width: 100%;
  height: 400px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
  background: transparent;
}
</style>